@charset 'UTF-8';
@import './common.scss';
@import '../fonts/iconfont.css';

.web{
	scroll-behavior: smooth;
	main{
		perspective: 3px;
		
		
		.bg{
			background-size: cover;
			// width: 100vw;
			width: 100%;
			height: 100%;
			z-index: -2;
			background-attachment: fixed;
			// background-image: url("../images/4.jpg");
			position: absolute;
		}	
		.top{
			background-image: url(../images/newstop.png);
			background-repeat: no-repeat;
			background-size: contain;
			width: 77vw;
			height: 28vw;
			margin: 0 auto;
			padding-top: 14vw;
			h2{
				width: 46vw;
				margin: 0 auto;
				font-size: 3vw;
				font-weight: normal;
				font-stretch: normal;
				line-height: 4vw;
				letter-spacing: 0vw;
				color: white;
				text-align: center;
				padding-bottom: 2vw;
			}
			a{
				display: block;
				width: 12vw;
				text-align: center;
				margin: 0 auto;
				font-size: 1vw;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0vw;
				color: white;
				border: 1px solid white;
				padding: 0.7vw 0;
				transition: background-color .5s;
			}
			a:hover{
				background-color: #d576ba;
				border-color: #d576ba;
			}
		}
		
		.center{
			width: 77vw;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			.rowBox{
				.imgBox{
					width: 24vw;
					height: 14vw;
					overflow: hidden;
					img{
						width: 100%;
					}
					padding-bottom: 1vw;
				}
				a{
					display: block;
					width: 24vw;
					font-size: 1vw;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0vw;
					color: #000000;
					text-align: center;
					padding: 0.8vw 0;
					border-top: 1px solid transparent;
					border-bottom: 1px solid transparent;
					transition: all .3s;
				}
				a:hover{
					border-top: 1px solid #000;
					border-bottom: 1px solid #000;					
				}
			}
			
		}
		
		.bottom{
			width: 50vw;
			margin: 0 auto;
			padding-top: 4vw;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 54vw;
			.colBox{
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				.left{
					width: 24vw;
					height: 14vw;
					overflow: hidden;
					img{
						width: 100%;
					}
				}
				.right{
					width: 21vw;
					
					h2{
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 1vw;
						letter-spacing: 0vw;
						color: #386ea6;
						padding-top: 0.5vw;
						padding-bottom: 0.5vw;
					}
					h3{
						
						font-size: 1vw;
						font-weight: bold;
						font-stretch: normal;
						line-height: 1.5vw;
						letter-spacing: 0vw;
						color: #262626;
						padding: 0.5vw 0vw;
					}
					h4{
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 1.5vw;
						letter-spacing: 0vw;
						color: #262626;
						padding-bottom: 2.1vw;
					}
					a{
						display: block;
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0vw;
						color: #000000;
						width: 12vw;
						text-align: center;
						padding: 0.7vw 0;
						border: 1px solid #202020;
						transition: background-color .5s;
					}
					a:hover{
						background-color: #d576ba;
						border-color: #d576ba;
					}
				}
			}
			
			#load{
				display: block;
				width: 16vw;
				margin: 0 auto;
				text-align: center;
				font-size: 1vw;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0vw;
				color: #000000;
				padding: 0.7vw 0;
				border: 1px solid #202020;
				margin-top: 2vw;
			}
		}
		
		.footBg{
			margin-top: 7vw;
			width: 100%;
			height: 40vw;
			background-image: url(../images/newsbg.png);
			background-repeat: no-repeat;
			background-size: cover;
		}
	}
}


@media screen and (max-width:767px) {
	.web{
		main{
			padding-top: 1vw;
			
			.top{
				width: 90%;
				background-size: cover;
				padding-top: 16vw;
				h2{
					transform: scale(1.2);
				}
				a{
					width: 20vw;
					border: none;
					border-bottom: 1px solid white;
				}
			}
			.center{
				padding-top: 4vw;
				width: 90%;
			}
			.bottom{
				width: 90%;
				
				height: auto;
				.colBox{
					width: 100%;
					margin: 0 auto;
					flex-wrap: wrap;
					
					position: relative;
					align-items: flex-start;
					padding-bottom: 3vw;
					.left{
						width: 48vw;
						height: 25vw;
						margin: 0 auto;
					}
					.right{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 65%;
						height: 28vw;
						align-items: flex-start;
						margin: 0 auto;
						h2{
							padding-top: 2.5vw;
							padding-left: 2.9vw;
							line-height: 2vw;
							
						}
						h3{
							padding-top: 0;
							
							transform: scale(0.9);
							line-height: 3vw;
							
						}
						h4{
							
							line-height: 3vw;
							transform: scale(0.9);
							padding-bottom: 0;
						}
						a{
							display: block;
							margin: 0 auto;
							width: 20vw;
							transform: scale(0.8);
							padding: 0.2vw 1vw;
							// position: absolute;
							// right: 0;
							// top: -0.5vw;
						}
					}
				}
				#load{
					margin-top: 2vw;
					width: 25vw;					
				}
				
			}
			.footBg{
				margin-top: 8vw;
				
			}
		}
	}
}